//
// Script to implement map functionality for the 
// Palo Alto Bicycle Club website.
// A 250 x 250 pixel map of Palo Alto is displayed 
// in the lower left corner of the page on startup.
// Buttons to hide and show map are provided. An
// input field allows any address to be input, and
// hitting return from that field or else clicking
// the show map button will display the new map. 
// The buttons and input field are intended to be
// temporary until the final functionality of displaying
// start points for bicycle rides is implemented.
// Kim Helliwell 3/09/2010


//var map;

const DEFAULTMAP = "Palo Alto, CA";

 
// Window onload function
// Sets up map, buttons and input field.
// 
window.onload=function()
{
    getMapDisplay(DEFAULTMAP);
    var nav = document.getElementById("nav");

//    var hideButton = addNode(nav, "button", "hideButton", "Hide Map", "Hide Map");
    var showButton = addNode(nav, "button", "showButton", "Show Map", "Show Map");
    var inputField = addNode(nav, "input", "addressBox", "Show Map");
    showButton.setAttribute("onclick", "showMapResponse()");
//    hideButton.setAttribute("onclick", "hideMapResponse()");
    inputField.setAttribute("onchange", "showMapResponse()");
}

// Function to display the map when a button is pressed or an input
// field is returned from.

function showMapResponse()
{
    var addressField = document.getElementById("addressBox");
    var addressText = addressField.value;
    if (addressText != "")
    {
        getMapDisplay(addressText);
    }

    clearInputBox(addressField);
}

// Function to hide the map

function hideMapResponse()
{
    map.parentNode.removeChild(map);
}


// Creates a new node of type "element", appends it to "parent".
// Sets the id attribute of the new node to "nameId".
// Sets the name attribute to nameText
// If "otherText" is present, this also creates a text node with
// "otherText" in it and appends it to the new node.
// Returns the new node.

function addNode(parent, element, nameId, nameText, otherText)
{   
    var newNode = document.createElement(element);
    parent.appendChild(newNode);
    newNode.setAttribute("id", nameId);
    newNode.setAttribute("name", nameText);
    if (otherText != "")
    {     var textNode = document.createTextNode(otherText);
      newNode.appendChild(textNode);
    }
    return newNode;
}



// Function to get and display a map of a particular address

function getMapDisplay(address)
{
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, displayMap);
}

// Callback function to display a map

function displayMap(point)
{
    var mapDiv = document.getElementById("mapDiv");
    var scale = 12;

    if (point == null)
    {
        alert("Cannot find the requested country.")
	point = new GLatLng(37.4418834, -122.1430195);
    }
    if (GBrowserIsCompatible()) 
    {
        var map = new GMap2(mapDiv);
	map.setCenter(point, scale);
	map.addControl(new GSmallZoomControl());
	map.addOverlay(new GMarker(point));
	
    }
}


// Function to clear the input field box and set focus in it.

function clearInputBox(inputField)
{
    inputField.value = "";
    inputField.focus();
}



